<template>
	<view>
		<view class="h-top">
			<view class="group-list">
				<text>缺勤人数：{{absenceNum}}人</text>
				<text style="margin-left: 60rpx;">总人数：{{totalNum}}人</text>
			</view>
		</view>
		<view class="search-box">
			<input type="text" :value="studentText" @input="searchInput" placeholder="搜索学生" />
			<view class="image" @click="searchStudent()">
				<image src="/static/search.png" mode="aspectFit"></image>
			</view>
			
		</view>
		<view class="xd-box-shadow">
			<view class="title">
				<view class="clas-grade">
					<text>缺勤情况</text>
				</view>
				
				<view class="time" v-if="search_result.length==0" @click="select_date=true">
					<text>{{pickerDate.split('-').join('.')}}</text>
					<image src="/static/user/rili.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="head">
				<text class="number">学号</text>
				<text class="name">姓名</text>
				<text class="score">班级</text>
				<text class="is-login">缺勤说明</text>
			</view>
			<view v-if="search_result.length>0">
				<view class="class-item" v-for="(item, inx) in search_result" :key="inx">
					<text class="number">{{item.studentNo}}</text>
					<text class="name" v-html="item.name.split('·').join('·<br>')"></text>
					<text class="score">{{clasHandle(item.clasId)}}</text>
					<text class="is-login" @click="seeDesc(item.reason)">查看</text>
				</view>
			</view>
			<view v-else-if="absenceNum>0">
				<view class="" v-for="(stu, k) in studentList" :key="k">
                    <view class="class-item" >
                        <text class="number">{{stu.studentNo}}</text>
                        <text class="name" v-html="stu.name.split('·').join('·<br>')"></text>
                        <text class="score">{{clasHandle(stu.student_clas)}}</text>

                        <text class="is-login" @click="seeDesc(stu.reason)">查看</text>
                    </view>
				</view>
				<view class="page" v-if="totalPage>0">
					<text :class="{active: pageI == i}" v-for="i of totalPage" :key="i" @click="getAbsence(i)">{{i}}</text>
				</view>
			</view>
            <view v-else-if="absenceNum==0" class="no-list">
                <text>无缺勤人数</text>
            </view>
			
		</view>
		<uni-transition mode-class="fade"
            :styles="utils.transitionStyles.bg" :show="select_date" @click="closePopup">
        </uni-transition>
        <uni-transition :mode-class="['slide-bottom']"
			:styles="select_class"
			:show="select_date">
			<view class="show-date">
				<date-picker @onCancel="closePopup" @onConfirm="onConfirm" :startDate="startDate" :endDate="endDate" :defaultValue="defaultPickerDate">
				    
				</date-picker>
			</view>
		</uni-transition>
	</view>
</template>
<script>
import datePicker from '@/components/date-picker/date-picker.vue'
export default {
    components: {
		datePicker
	},
    data(){
        return{
            studentText: '',
            totalNum: 0,
            absenceNum: 0,
            totalPage: 1,
            studentList: {},

            pageI: 1,

            year_list: [2022],
            select_date: false,
            month_value: [0, 0],
            select_month_value: [0, 0],
            pickerDate: '',
            defaultPickerDate: '',
            startDate: "2018-05-02",
            endDate: "2030-12-31",
            showPickerDate: '',

            search_result: [],
			select_class: {
				position: 'fixed',
				/* #ifdef H5 */
				left: 'var(--window-left)',
				right: 'var(--window-right)',
				/* #endif */
				/* #ifndef H5 */
				left: 0,
				right: 0,
				/* #endif */
				bottom: '0',
				height: '670rpx',
				'z-index': 9
			},
		}
	},
	onLoad() {
        
        let today = this.utils.initDateDay();
        this.pickerDate = today;
        this.defaultPickerDate = today

        let date = today.split('-');
		this.getAbsence(1)
        // this.showPickerDate = date[0]+'年'+date[1]+'月'+date[2]+'日';
	},
	methods: {
        clasHandle(clasId){
            let baseInfo = getApp().globalData.baseInfo,
                orgGraders = baseInfo.newOrgGraders;
            if(!orgGraders || orgGraders.length==0) return
            let info = orgGraders.find(item=>Object.keys(item)[0] == clasId) || {} 
            return Object.values(info)[0]
        },
		searchStudent(){
					
			if(!this.studentText){
				this.getAbsence(1)
				return
			}
			this.api.get('tGradeClass/heathFindStudent', {
				name: this.studentText,
                date: this.pickerDate
			}).then(res=>{
				let data = res.data.students || [];
				this.search_result = data
				if(data.length==0){
					this.utils.showToast('没有该学生的缺勤记录')
				}
			})
		},
        seeDesc(reason){
            const platform = getApp().globalData.platform
            uni.showModal({
                title: '缺勤说明',
                content: reason,
                showCancel: false,
                confirmText: '确认',
                success: (res) => {
                    if (res.confirm) {
                        
                    } else if (res.cancel) {
                        
                    }
                }
            });
            // this.utils.showModal(reason, ()=>{}, {}, '缺勤说明')
        },
		getAbsence(page){
			this.search_result = []
			this.studentList = []
            this.pageI = page
			this.api.get('tGradeClass/findAbsence', {
				date: this.pickerDate,
				page: page,
				limit: 10
			}).then(res=>{
				if(res.data.state != 'ok') return
                let data = res.data.page || {};
                this.studentList = data.list
                this.totalPage = data.totalPage
                this.totalNum = res.data.sum || 0
                this.absenceNum = data.totalRow || 0
                
			})
		},
        onConfirm(e){
            this.pickerDate = e.dateValue;
            this.closePopup();
            let date = e.dateValue.split('-');
            // this.showPickerDate = date[0]+'年'+date[1]+'月'+date[2]+'日';
            this.getAbsence(1)
        },
        searchInput(eve){
			this.studentText = eve.detail.value;
		},
		closePopup(){
			this.select_date = false
		}
	}
}
</script>
<style lang="less" scoped>
	.h-top{
		padding-top: 50rpx;
		height: 134rpx;
		// #ifdef APP-PLUS
		padding-top: 90rpx;
		height: 164rpx;
		// #endif
		background-image: url('~@/static/u658_div.png');
		background-repeat: no-repeat;
		background-position: 0 0;
		background-color: #55acee;
		
		box-sizing: border-box;
		// color: transparent;
	}
	
	.group-list{
		text-align: center;
		text{
			margin: 0 30rpx;
			color: #fff;
			font-size: 28rpx;
		}
	}
	.search-box{
		margin: 36rpx 32rpx 0;
		height: 56rpx;
		border: 2rpx solid #f2f2f2;
		border-radius: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// color: #fff;
		padding-left: 20rpx;
		box-sizing: border-box;
		input{
			font-size: 26rpx;
		}
		.image{
			width: 56rpx;
			height: 56rpx;
			border-radius: 28rpx;
			background-color: #e9f4ff;
		}
		image{
			width: 56rpx;
			height: 56rpx;
		}
	}
    .xd-box-shadow{
        margin: 32rpx 32rpx 0;
    }
    .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx 24rpx 12rpx 12rpx;
        .time{
            padding: 0 20rpx;
            height: 40rpx;
            border-radius: 20rpx;
            background-color: #e9f4ff;
            font-size: 24rpx;
            color: #aaa;
        }
        image{
            width: 40rpx;
            height: 40rpx;
            vertical-align: -10rpx;
            margin-left: 40rpx;
        }
    }
    .head{
        text{
            background-color: #555;
            height: 56rpx;
            line-height: 56rpx;
            color: #fff;
            &:last-child{
                border: none;
            }
        }
    }
    .head, .class-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        font-size: 24rpx;
        .number{
            display: none;
            width: 110rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .name{
            width: 252rpx;
            word-break: break-word;
        }
        .score{
            width: 252rpx;
            white-space: nowrap;
        }
        .is-login{
            width: 180rpx;
        }
    }
    .class-item{
        height: 80rpx;
        border-bottom: 2rpx solid  #f2f2f2;
    }
    .page{
        text-align: right;
        padding: 40rpx 18rpx 32rpx;
        margin-bottom: 24rpx;
        text{
            display: inline-block;
            margin-right: 16rpx;
            height: 32rpx;
            line-height: 32rpx;
            width: 32rpx;
            border-radius: 10rpx;
            text-align: center;
            background-color: #d7d7d7;
            color: #fff;
            font-size: 24rpx;
            &.active{
                background-color: #55acee;
            }
        }
    }
    .no-list{
        text-align: center;
        padding: 20rpx 0;
    }
</style>